<template>
  <div style="width:100%;height:100%">
    <div id="userhot"></div>
    <!-- <div class="input-card" style="width: auto;">
      <div class="input-item">
        <button class="btn" @click="heatmap.show()">显示热力图</button>
      </div>
      <div class="input-item">
        <button class="btn" @click="heatmap.hide()">关闭热力图</button>
      </div>
    </div> -->
  </div>
</template>

<script>
// https://a.amap.com/jsapi_demos/static/resource/heatmapData.js
import heatmapData from './userHotData';
export default {
  mounted() {
   
    // 延迟加载，防止出现AMap not defined
    setTimeout(() => {
      this.initMap();
      this.createHeatMap();
    }, 1000);
  },
  beforeDestroy() {
    this.map && this.map.destroy();
  },
  data() {
    return {
      map: null,
      heatmap: null
    };
  },
  methods: {
    initMap() {
      this.map = new AMap.Map("userhot", {
        resizeEnable: true,
        center: [117.062059, 36.703579],
        zoom: 11,
        mapStyle:'amap://styles/light', 
        
        /*
          地图风格：
        1.'amap://styles/normal',  常规样式
        2.'amap://styles/macaron',马卡龙风格
        3.'amap://styles/graffiti',涂鸦风格
        4.'amap://styles/whitesmoke',青山黛风格
        5.'amap://styles/dark',幻影黑风格
        6.'amap://styles/fresh',草青色风格
        7.'amap://styles/darkblue',极夜蓝风格
        8.'amap://styles/blue',靛青蓝风格
        9.'amap://styles/light',月光银风格
        10.'amap://styles/grey',雅土灰风格
         */
       
        //自定义地图样式：https://lbs.amap.com/dev/mapstyle/index
      });
    },
    //判断浏览区是否支持canvas
    isSupportCanvas() {
      let elem = document.createElement("canvas");
      return !!(elem.getContext && elem.getContext("2d"));
    },
    createHeatMap() {
      if (!this.isSupportCanvas()) {
        return this.$msg.error(
          "热力图仅对支持canvas的浏览器适用,您所使用的浏览器不能使用热力图功能,请换个浏览器试试。"
        );
      }
      let __this = this;
      this.map.plugin(["AMap.Heatmap"], function() {
        //初始化heatmap对象
        __this.heatmap = new AMap.Heatmap(__this.map, {
          visible: false,
          radius: 25, //给定半径
          opacity: [0, 0.8],
        });
        //设置数据集：该数据为北京部分“公园”数据
        __this.heatmap.setDataSet({
          data: heatmapData,
          max: 100
        });
      });
    }
  }
};
</script>

<style lang="scss" scoped>
// @import url("https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css");
#userhot {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
.input-card .btn {
  margin-right: 5px;
  width: 20px;
}
// .input-card{
//   width: 100px!important;
//   height: 100px!important;
// }
// .btn{
//   position: absolute!important;
//   right: 10px!important;
//   top: 10px!important;
// }
</style>
